<script setup>
	const props = defineProps(['current'])
	const handleClick = (name) => {
		uni.redirectTo({
			url: '/pages/tabBar/' + name
		})
	}
</script>

<template>
	<view>
		<uv-tabbar placeholder activeColor='#1989fa' fixed zIndex='10' safeAreaInsetBottom class="page-wrap"
			:customStyle="{width: 'auto',minWidth: '640rpx',maxWidth: '750rpx',margin:  '0 auto',}">
			<uv-tabbar-item :class='[{actived:props.current==0}]' text="首页" icon="home" @click='handleClick'
				name="HomePage"></uv-tabbar-item>
			<uv-tabbar-item :class='[{actived:props.current==1}]' text="购物车" icon="shopping-cart" @click='handleClick'
				name="ShoppingTrolleyPage"></uv-tabbar-item>
			<uv-tabbar-item :class='[{actived:props.current==2}]' text="我的" icon="account" @click='handleClick'
				name="MinePage"></uv-tabbar-item>
		</uv-tabbar>
	</view>
</template>

<style lang="scss" scoped>
	.icon {
		width: 36rpx;
		height: 36rpx;
	}

	::v-deep .uv-tabbar-item__icon {
		width: unset;
	}

	::v-deep .actived {

		.uv-icon__icon,
		.uv-tabbar-item__text {
			color: #1989fa !important;
		}
	}
</style>